<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import ranking1 from '@/assets/bigScreen/ranking1.png'
import ranking2 from '@/assets/bigScreen/ranking2.png'
import ranking3 from '@/assets/bigScreen/ranking3.png'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '10%',
        right: '0%',
        left: '-12%',
        bottom: '5%',
        containLabel: true,
    },
    legend: {
        top: '5%',
        x: 'center',
        textStyle: {
            color: '#9E9E9E',
        },
    },
    xAxis: {
        type: 'value',
        show: false,
    },
    yAxis: [
        {
            type: 'category',
            triggerEvent: true,
            show: true,
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            data: props.xData,
            axisLabel: {
                interval: 0,
                color: '#fff',
                align: 'left',
                margin: 120,
                fontSize: 13,
            },
        },
        {
            data: props.sData,
            type: 'category',
            triggerEvent: true,
            show: true,
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                // interval: 0,
                color: '#fff',
                align: 'right',
                margin: 50,
                fontSize: 13,
                formatter: function(value, index) {
                    return value
                },
            },
        },
    ],
    series: [
        {
            data: props.sData,
            type: 'bar',
            showBackground: true,
            barWidth: 15,
            backgroundStyle: {
                // color: '#091D40',
                color: 'rgba(180, 180, 180, 0.1)',
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                        {
                            offset: 0,
                            color: '#091D40',
                        },
                        {
                            offset: 0.5,
                            color: '#0281CB',
                        },
                        {
                            offset: 1,
                            color: '#00FFF4',
                        },
                    ]),
                },
            },
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
